<template>
  <div class="layout-container">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="header-content">
        <div class="logo">管理系统</div>
        <div class="user-info">
          <el-dropdown @command="handleUserCommand">
            <span class="el-dropdown-link">
              <el-avatar :size="30" class="user-avatar" />
              {{ userInfo?.username }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-header>

    <div class="main-container">
      <!-- 左侧导航栏 -->
      <el-aside class="sidebar" width="200px">
        <el-menu
          :default-active="activeMenu"
          class="sidebar-menu"
          router
        >
          <el-menu-item index="/">
            <el-icon><home-filled /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="/profile">
            <el-icon><user /></el-icon>
            <span>个人中心</span>
          </el-menu-item>
          <el-menu-item index="/user">
            <el-icon><tickets /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/about">
            <el-icon><info-filled /></el-icon>
            <span>关于我们</span>
          </el-menu-item>
          <el-menu-item
            index="/admin"
            v-if="userInfo?.role === 'administrator'"
          >
            <el-icon><setting /></el-icon>
            <span>管理员</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区域 -->
      <el-main class="main-content">
        <!-- 面包屑导航 -->
        <el-breadcrumb
          class="breadcrumb"
          separator="/"
          v-if="breadcrumbItems.length > 0"
        >
          <el-breadcrumb-item
            v-for="(item, index) in breadcrumbItems"
            :key="index"
            :to="item.path"
          >
            {{ item.title }}
          </el-breadcrumb-item>
        </el-breadcrumb>

        <router-view />
      </el-main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  ArrowDown,
  HomeFilled,
  User,
  Tickets,
  InfoFilled,
  Setting
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 获取用户信息
const userInfo = computed(() => {
  const userInfoStr = localStorage.getItem('userInfo')
  return userInfoStr ? JSON.parse(userInfoStr) : null
})

// 当前激活的菜单项
const activeMenu = ref(route.path)

// 监听路由变化，更新激活菜单
watch(
  () => route.path,
  (newPath) => {
    activeMenu.value = newPath
  }
)

// 面包屑数据
const breadcrumbItems = computed(() => {
  const routes = [
    { path: '/', title: '首页' },
    { path: '/profile', title: '个人中心' },
    { path: '/user', title: '用户管理' },
    { path: '/about', title: '关于我们' },
    { path: '/admin', title: '管理员' }
  ]

  // 根据当前路由生成面包屑
  const matchedRoutes = []

  // 添加首页作为第一个面包屑
  matchedRoutes.push({ path: '/', title: '首页' })

  // 查找当前路由匹配的项
  const currentRoute = routes.find(r => r.path === route.path)
  if (currentRoute && route.path !== '/') {
    matchedRoutes.push({
      path: currentRoute.path,
      title: currentRoute.title
    })
  }

  return matchedRoutes
})

// 用户下拉菜单处理
const handleUserCommand = (command: string) => {
  switch (command) {
    case 'profile':
      router.push('/profile')
      break
    case 'logout':
      ElMessageBox.confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.removeItem('userInfo')
        router.push('/login')
        ElMessage.success('已退出登录')
      }).catch(() => {
        // 取消操作
      })
      break
  }
}
</script>

<style scoped>
.layout-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  background: linear-gradient(90deg, #409eff, #64b5f6);
  color: white;
  height: 60px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 100;
  padding: 0 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1px;
}

.user-info {
  cursor: pointer;
}

.user-avatar {
  margin-right: 10px;
  vertical-align: middle;
  background-color: rgba(255, 255, 255, 0.2);
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  height: 100%;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.el-dropdown-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.main-container {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar {
  background-color: #ffffff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  z-index: 99;
}

.sidebar-menu {
  border-right: none;
  height: 100%;
}

.sidebar-menu :deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
}

.sidebar-menu :deep(.el-menu-item.is-active) {
  background-color: #ecf5ff;
  color: #409eff;
  border-right: 3px solid #409eff;
}

.main-content {
  flex: 1;
  padding: 20px;
  overflow: auto;
  background-color: #f0f2f5;
}

.breadcrumb {
  margin-bottom: 20px;
  padding: 10px 15px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
</style>
